<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layui导航及下拉</title>
    <link rel="stylesheet" href="index.css">
    <script src="../jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="navs">
        <ul class="clearfix">
            <li>
                <a href="#">Layer</a>
            </li>
            <li>
                <a href="#">Mobile</a>
            </li>
            <li>
                <a href="#">文档</a>
            </li>
            <li>
                <a href="#">示例</a>
            </li>
            <li class="around">
                <a href="#">周边</a>
                <ul class="component">
                    <li>
                        <a href="#">独立组件</a>
                    </li>
                    <li>
                        <a href="#">扩展组件</a>
                    </li>
                    <li>
                        <a href="#">扩展组件(gitee)</a>
                    </li>
                </ul>
                <span></span>
            </li>
            <li>
                <a href="#">反馈</a>
            </li>
            <li>
                <a href="#">反馈交流QQ群</a>
            </li>
            <p class="bar"></p>
        </ul>
    </div>
</body>
<script>
    $(function() {
        $(".around").hover(function() {
            $(this).find("ul").toggle().animate({
                top: 65,
                "transition": "all 1s",
            });
        }, function() {
            $(this).find("ul").css("top", "70px").hide();
        })
        $(".around").siblings("li").on("mouseenter", function() {
            let pos = $(this).children("a").position();
            console.log(pos.left);
            let w = $(this).width();
            // console.log(w);
            $(".bar").stop().animate({
                left: pos.left + "px",
                width: w,
            })
        })
        $(".around").siblings("li").on("mouseleave", function() {
            $(".bar").stop().animate({
                width: 0,
            })
        })
    })
</script>

</html>